<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>canvas</title>
    <style>
        * {
            /* height: 100%; */
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas">
        你的浏览器不支持canvas
    </canvas>
    <script>

        /* 
        心形
        x(t)=a(2cost-cos2t)
        y(t)=a(2sint-sin2t)
        0<=t<=2PI
        */

        /*
        桃型
        x=16 * (sin(t)) ^ 3;
        y=13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t)。
        */
        let canvas = document.getElementById("canvas");
        let width = canvas.clientWidth;
        let height = canvas.clientHeight;
        let ctx = canvas.getContext('2d');
        let HeartsList = [];
        function cord(precision = 1, width, height) {
            let random = {
                x: randomNum(20, width - 50),
                y: randomNum(10, height - 50)
            }
            let cordinates = [];
            for (let i = 0; i < 360; i = i + precision) {
                let t = i * 1 / 180 * Math.PI;
                cordinates.push({
                    x: 16 * Math.pow(Math.sin(t), 3) + random.x,
                    y: -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)) + random.y
                })
            }
            return cordinates
        }
        // 生成随机整数数
        function randomNum(minNum, maxNum) {
            switch (arguments.length) {
                case 1:
                    return parseInt(Math.random() * minNum + 1, 10);
                    break;
                case 2:
                    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                    break;
                default:
                    return 0;
                    break;
            }
        }

        function Heart() {
            this.cords = cord(1, width, height);
        }

        Heart.prototype.show = function () {
            ctx.beginPath();
            for (let i = 0; i < this.cords.length; i++) {
                ctx.lineTo(this.cords[i].x, this.cords[i].y);
            }
            // 画线结束
            ctx.closePath();
            ctx.lineWidth = 1;
            // 边角样式
            ctx.lineJoin = 'round'
            // 填充颜色--填充
            ctx.fillStyle = 'red';
            ctx.fill();
        }
        Heart.prototype.clear = function () {

        }

        function draw() {
            let h = new Heart();
            h.show();
            HeartsList.push(h);
            ctx.clearRect(0, 0, width, height)
            if (HeartsList.length > 15) {
                HeartsList.shift();
            }
            // 重绘
            for (let i = 0; i < HeartsList.length; i++) {
                HeartsList[i].show();
            }
            function sleep(time) {
                return new Promise((resolve) => setTimeout(resolve, time));
            }
            // 起始位置
            sleep(500).then(() => {
                requestAnimationFrame(draw)
            }
            )

        }
        let a = 0;
        requestAnimationFrame(() => {
            draw()
        })

        // 填充样式
        /* 矩阵 */
        // (x, y ,width, height);
        // ctx.fillStyle = "#ccc";
        // ctx.fillRect(50, 100, 150, 75);

        /* 画线 */
        // 画线开始
        // ctx.beginPath();
        // // 起始位置
        // // ctx.moveTo(cords[0].x, cords[0].y);

        // for (let i = 0; i < cords.length; i++) {
        //     ctx.lineTo(3 * cords[i].x, 3 * cords[i].y);
        // }
        // // 终点位置
        // // ctx.lineTo(0, 100);
        // // 连续的路径
        // // ctx.lineTo(50, 100);
        // // // 连续的路径
        // // ctx.lineTo(50, 50);
        // // 画线结束
        // ctx.closePath();
        // 线宽
        // ctx.lineWidth = 3;
        // // 边角样式
        // ctx.lineJoin = 'round'
        // // 填充颜色--填充
        // ctx.fillStyle = 'red';
        // ctx.fill();
        // // 描线--颜色
        // ctx.strokeStyle = 'green'
        // ctx.stroke();

        /* 文本 */
        // 样式
        // ctx.font = "30px Arial"
        // // 实心文本
        // ctx.fillText("我是实心文本", 100, 50);
        // // 空心文本
        // ctx.strokeText("我是空心文本", 120, 70)
    </script>
</body>

</html>